<template>
  <view class="medicine-reminder-page">
    <!-- 日历部分 -->
    <div class="calendar-wrapper">
      <el-date-picker
          v-model="currentDate"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          :disabled="true"
          class="calendar"
      ></el-date-picker>
    </div>

    <!-- 药物信息卡片 -->
    <div class="card-wrapper">
      <el-card class="medicine-card">
        <template #header>
          <img :src="medicineInfo.packageImage" alt="药物包装盒" class="medicine-package">
        </template>
        <div class="medicine-details">
          <p>服用时间：{{ medicineInfo.takeTime }}</p>
          <p>服用剂量：{{ medicineInfo.dosage }}</p>
        </div>
      </el-card>
    </div>
  </view>
</template>
<script setup>
import {ref, onMounted} from 'vue';

// 定义药物信息响应式变量
const medicineInfo = ref({
  packageImage: '',
  takeTime: '',
  dosage: ''
});

// 定义当前日期
const currentDate = ref(new Date());

// 模拟调用接口获取数据
const fetchMedicineInfo = async () => {
  // 这里可以添加实际的接口调用逻辑
  // 假设接口返回的数据格式如下
  const mockData = {
    packageImage: 'https://example.com/medicine_package.jpg',
    takeTime: '2025-03-15 10:00',
    dosage: '2片'
  };
  medicineInfo.value = mockData;
};

onMounted(() => {
  fetchMedicineInfo();
});
</script>
<style scoped lang="scss">
.medicine-reminder-page {
  min-height: 100vh;
  padding: 30px 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  box-sizing: border-box;

  .calendar-wrapper {
    width: 90%;
    max-width: 400px;
    margin: 0 auto 30px;

    .calendar {
      width: 100%;
      background: white;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

      :deep(.el-input__inner) {
        height: 48px;
        font-size: 18px;
        text-align: center;
      }
    }
  }

  .card-wrapper {
    width: 90%;
    max-width: 600px;
    margin: 0 auto;
    padding: 15px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);

    .medicine-card {
      width: 100%;
      border: none;

      :deep(.el-card__header) {
        padding: 0;
        border-bottom: none;
      }

      .medicine-package {
        width: 100%;
        height: auto;
        max-height: 40vh;
        object-fit: contain;
        border-radius: 12px 12px 0 0;
      }

      .medicine-details {
        padding: 25px;
        font-size: 18px;
        line-height: 1.8;

        p {
          margin: 12px 0;
          color: #2c3e50;
          font-weight: 500;

          &:first-child {
            color: #3498db;
          }
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .medicine-reminder-page {
    padding: 20px 15px;

    .card-wrapper {
      width: 100%;
      padding: 10px;

      .medicine-card {
        .medicine-details {
          padding: 20px;
          font-size: 16px;
        }
      }
    }
  }
}
</style>
